<template>
	<view class="main">

		<view class="posv">
			<view class="posvi" @click="openPosPopAdd" v-if="!posList.length"><text>请添加订餐地址</text><uv-icon name="plus-circle"
					color="#2c9b94" size="22" /> </view>
			<view class="posvi" @click="openPosPop" v-else-if="!posListChoose.id"><text>请选择订餐地址</text><uv-icon
					name="play-right-fill" color="#2c9b94" size="22" /> </view>
			<view class="posvi" v-else @click="openPosPop">
				<view class="posvic">
					<view class="posvict">{{posListChoose.pos}}</view>
					<view class="posvice"><text>{{posListChoose.name}}</text><text>{{posListChoose.phone}}</text></view>
				</view>
				<uv-icon name="play-right-fill" color="#2c9b94" size="22" />
			</view>
		</view>

		<uv-tabs :list="menusList" :scrollable="true" lineColor="#006633" keyName="categoryName" :current='tabCurrent'
			@click="clickMenus"></uv-tabs>

		<view class="mainc">
			<view class="maincl">
				<scroll-view :scroll-y="true" class="scrollV1" style="height:calc(90vh - 100px);">
					<view @click="changeMenusItem(i,o)" :class="['scrollV1i',menusItemIndex == i.id ? 'scrollV1iA':'']"
						v-for="(i,o) in menusItemList" :key="o">{{i.categoryName}}
					</view>
				</scroll-view>
			</view>

			<view class="maincr">
				<scroll-view :scroll-y="true" class="scrollV2" style="height:calc(90vh - 100px);"
					@scrolltolower='scrolltolower'>
					<view class="goodsi" v-for="(i,o) in goodsList" :key="o">
						<img @click="openGoodInfo(i)" :src="i.image?i.image.split(',')[0] : ''" alt="">
						<view class="goodsir">
							<view class="goodsirt" @click="openGoodInfo(i)">{{i.productName}}</view>
							<view class=" goodsirb">
								<view class="goodsirbp">￥{{(i.price).toFixed(2)}}</view>
								<view class="goodsirbn">
									<uv-number-box v-model="i.num" :min="0" :max="i.price == '0'?1:99" integer @change="changeGoods(i)"
										button-size="24" color="#ffffff" bgColor="#00663399" iconStyle="color: #fff">></uv-number-box>
								</view>
							</view>
						</view>
					</view>
					<uv-load-more :status="status" />
				</scroll-view>
			</view>
		</view>

		<view class="carV" :style="{display:carVShow?'none':'flex'}">
			<view class="carVl" @click="openCar">
				<img src="https://www.rzbygszbz.cn/apiI/sys/common/static/20250124/购物车_1725879430021_1737702621039.png"
					alt="" />
				<uv-badge numberType="limit" :customStyle="{'position':'absolute','left':'50rpx','top':'-20rpx'}" shape='horn'
					max="99" bgColor="#006633" :value="carList.length"></uv-badge>
				<text>￥{{(goodsAllPrice/100).toFixed(2)}}</text>
			</view>
			<uv-button type="primary" @click="subCar" shape="circle" size="normal" :text="carList.length == 0 ?'':'选好了'"
				:color="carList.length == 0  ? '#fff':'#006633'"></uv-button>
		</view>

		<view class="mock" v-if="mainLoadding">
			<uv-loading-icon mode="spinner" color="#fff" text="加载中..." textColor="#fff"></uv-loading-icon>
		</view>

		<uv-popup ref="goodInfoPopup" mode="bottom" :closeable='true'
			custom-style="paddingBottom:60px;height:60vh;backgroundColor:#f5f5f5;position:relative;z-index:999998;">
			<scroll-view :scroll-y="true" class="scrollV2" style="height:60vh;">
				<view class="goodInfoV">
					<view class="goodInfoVs">
						<uv-swiper :list="goodItem.image ? goodItem.image.split(',') :''" indicator indicatorMode="line" circular
							height="380rpx" radius="0"></uv-swiper>
					</view>
					<view class="goodInfoVc">
						<view class="goodInfoVcn">{{goodItem.productName}}</view>
						<view class="goodInfoVcp">￥{{(goodItem.price||0).toFixed(2)}}</view>
						<view class="goodInfoVct">
							<view class="goodInfoVcti" v-for="(i,o) in goodItem.tag?goodItem.tag.split(','):''">{{i}}</view>
						</view>
						<view class="goodInfoVce">{{goodItem.content || ''}}</view>
					</view>
				</view>
			</scroll-view>
		</uv-popup>

		<uv-popup ref="carPopup" @change='carPopupClose' mode="bottom" :closeable='true' :closeOnClickOverlay='false'
			custom-style="padding:30px 0 60px;height: 60vh;backgroundColor:#fff;position:relative">
			<view class="clearCar" @click="clearCar">
				<uv-icon size="39rpx" color="#FF3B30" name="empty-car"></uv-icon>
				清空
			</view>
			<scroll-view :scroll-y="true" class="scrollV2 scrollV3 " style="height:60vh;">
				<view class="goodsi" v-for="(i,o) in carList" :key="o">
					<img :src="i.image?i.image.split(',')[0] : ''" alt="">
					<view class="goodsir">
						<view class="goodsirt">{{i.productName}}</view>
						<view class="goodsirb">
							<view class="goodsirbp">￥{{(i.price).toFixed(2)}}</view>
							<view class="goodsirbn">
								<uv-number-box v-model="i.num" :min="0" :max="i.price == '0'?1:99" integer @change="changeGoods(i)"
									button-size="24" color="#ffffff" bgColor="#00663399" iconStyle="color: #fff">></uv-number-box>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</uv-popup>

		<uv-popup ref="posPopup" mode="bottom" :closeable='true' @change='changePosPopup'
			custom-style="height:50vh;backgroundColor:#f5f5f5;position:relative;z-index:999998;">
			<view class="posp">
				<view class="pospt">选择订餐地址</view>
				<view class="pospis">
					<view class="pospi" v-for="(i,o) in posList" :key="o" >
						<view :class="['pospib',i.id == posListChoose.id?'pospibA':'']" @click.stop="choosePos(i)">
							<uv-icon name="checkmark" v-if="i.id  == posListChoose.id" color="#2c9b94" size="20" />
						</view>
						<view class="pospic" @click.stop="choosePos(i)">
							<view class="pospict">{{i.pos}}</view>
							<view class="pospice"><text>{{i.name}}</text><text>{{i.phone}}</text></view>
						</view>
						<uv-icon @click.stop="openPosPopAdd(i)" name="edit-pen" color="#2c9b94" size="26" />
					</view>
				</view>
				<view class="pospa" @click="openPosPopAdd">
					<uv-icon name="plus-circle" color="#fff" size="20" />添加订餐地址
				</view>
			</view>
		</uv-popup>

	</view>
</template>

<script>
	import {
		getCategoryList,
		getGoodListApi
	} from '@/api/common.js'
	export default {
		data() {
			return {
				posList: [{
					id: 1,
					pos: '3号楼21楼1202',
					name: '王先生',
					phone: '13322332211'
				}, {
					id: 2,
					pos: '3号楼4楼2501',
					name: '李先生',
					phone: '13322335452'
				}, {
					id: 12,
					pos: '3号楼21楼1202',
					name: '王先生',
					phone: '13322332211'
				}, {
					id: 24,
					pos: '3号楼4楼2501',
					name: '李先生',
					phone: '13322335452'
				}],
				posListChoose: {
					id: 1,
					pos: '3号楼21楼1202',
					name: '王先生',
					phone: '13322332211'
				},
				tabCurrent: 0,
				mainLoadding: false,
				status: 'loadmore',
				menusList: [],
				menusItemList: [],
				goodsList: [],
				menusItemIndex: null,
				goodListNo: 1,
				goodsAllPrice: 0,
				carList: [],
				goodItem: {},
				carVShow: false,
			}
		},
		mounted() {
			getCategoryList().then(res => {
				this.menusList = res.data.result
				getCategoryList({
					parentId: res.data.result[0].id
				}).then(ress => {
					this.menusItemList = ress.data.result
					this.menusItemIndex = ress.data.result[0].id
					this.getGoodList(true);
				})
			})
		},
		methods: {
			choosePos(item) {
				this.posListChoose = item
			},
			openPosPopAdd(item = {}) {
				uni.navigateTo({
					url: '/pages/Canteen/Address?info=' + JSON.stringify(item)
				})
			},
			openPosPop() {
				this.$refs.posPopup.open();
			},
			changePosPopup(e) {
				this.carVShow = e.show;
			},
			carPopupClose(e) {
				if (!e.show) {
					this.mainLoadding = true
					this.carGoodstoList();
				}
			},
			carGoodstoList() {
				const that = this
				setTimeout(() => {
					if (that.carList.length && that.goodsList.length) {
						that.carList.map(n => {
							that.goodsList.map(i => {
								if (i.id == n.id) i.num = n.num
							})
						})
					} else if (that.carList.length == 0 && that.goodsList.length) {
						that.goodsList.map(i => i.num = 0)
					}
					that.mainLoadding = false
				}, 1000)
			},
			openGoodInfo(i) {
				this.goodItem = i
				this.$refs.goodInfoPopup.open();
			},
			subCar() {
				console.log(this.carList, this.goodsAllPrice)
			},
			clearCar() {
				this.carList = []
				this.goodsAllPrice = 0
				this.carGoodstoList();
				this.$refs.carPopup.close();
			},
			openCar() {
				if (this.carList.length) this.$refs.carPopup.open();
				this.$refs.goodInfoPopup.close();
			},
			scrolltolower() {
				if (this.status == 'nomore') return;
				this.getGoodList();
			},
			getGoodList(type = false) {
				const that = this
				that.mainLoadding = true
				if (type) {
					that.goodListNo = 1
				} else {
					that.goodListNo++
				}
				that.status = 'loading'
				getGoodListApi({
					productCategory: that.menusItemIndex,
					pageNo: that.goodListNo,
					pageSize: 10,
				}).then(res => {
					if (type) {
						that.goodsList = res.data.result.records
					} else {
						that.goodsList = res.data.result.records.concat(that.goodsList)
					}
					that.carGoodstoList()
					if (res.data.result.records.length < 10) {
						that.status = 'nomore'
					} else {
						that.status = 'loadmore'
					}
				})
			},
			changeMenusItem(i, o) {
				if (this.menusItemIndex == i.id) return;
				this.menusItemIndex = i.id
				this.getGoodList(true);
			},
			clickMenus(e) {
				if (this.tabCurrent == e.index) return;
				this.tabCurrent = e.index
				this.goodsList = []
				getCategoryList({
					parentId: e.id
				}).then(res => {
					this.menusItemList = res.data.result
					this.menusItemIndex = res.data.result[0].id
					this.getGoodList(true);
				})
			},
			changeGoods(item) {
				if (this.carList.length == 0) {
					this.carList.push(item)
				} else {
					let isSon = false
					this.carList.map((i, o) => {
						if (i.id == item.id) {
							isSon = true
							this.carList.splice(o, 1, item)
						}
					})
					if (!isSon) {
						this.carList.push(item)
					}
				}
				setTimeout(() => {
					this.carList.map((i, o) => {
						if (i.num == '0') {
							this.carList.splice(o, 1)
						}
					})
				}, 100)
				setTimeout(() => {
					let _price = 0
					this.carList.map((i, o) => {
						i.allPrice = ((i.price * 100 * i.num) / 100).toFixed(2)
						_price += i.price * 100 * i.num
					})
					this.goodsAllPrice = _price
				}, 100)
			},
			openPopup() {
				this.$refs.popup.open();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #f5f5f5;

		.posv {
			height: 110rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0 30rpx;

			.posvi {
				display: flex;
				align-items: center;
				font-weight: bold;
				justify-content: space-between;
				width: 100%;
				font-size: 38rpx;

				text {
					display: inline-block;
				}


				.posvic {
					.posvict {
						margin-bottom: 10rpx;
						width: 500rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.posvice {
						font-weight: normal;
						font-size: 28rpx;
						color: #555;
					}
				}
			}
		}
	}

	.mainc {
		margin-top: 20rpx;
		position: relative;
		display: flex;
		justify-content: space-around;

		.maincl {
			width: 180rpx;
		}

		.maincr {
			width: 560rpx;
		}

		.scrollV1 {
			.scrollV1i {
				height: 80rpx;
				line-height: 80rpx;
				width: 180rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: center;
				font-size: 28rpx;
				color: #333;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
			}

			.scrollV1iA {
				color: #006633;
				background-color: #fff;
				border-radius: 12rpx;

				&:before {
					content: '';
					width: 6rpx;
					display: inline-block;
					height: 60rpx;
					background-color: #006633;
					border-radius: 4rpx;
					position: absolute;
					left: 6rpx;
				}
			}
		}

	}

	.clearCar {
		position: absolute;
		left: 40rpx;
		top: 10rpx;
		color: #FF3B30;
		display: flex;
		align-items: center;
	}

	.scrollV2 {
		.goodsi {
			background-color: #fff;
			margin-bottom: 6rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			border-radius: 12rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 12rpx;
				margin-right: 20rpx;
			}

			.goodsir {
				width: 400rpx;

				.goodsirt {
					font-size: 36rpx;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.goodsirb {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 10rpx;

					.goodsirbp {
						color: #FF3B30;
						font-size: 32rpx;
						font-weight: bold;
					}

					.goodsirbn {}
				}
			}
		}
	}

	.goodInfoV {

		.goodInfoVs {}

		.goodInfoVc {
			width: 90%;
			margin: 20rpx 3%;
			padding: 20rpx 2%;
			background-color: #fff;
			border-radius: 12rpx;

			.goodInfoVcn {
				font-size: 36rpx;
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.goodInfoVcp {
				color: #FF3B30;
				font-size: 36rpx;
				margin: 10rpx 0;
			}

			.goodInfoVct {
				display: flex;
				flex-wrap: wrap;

				.goodInfoVcti {
					padding: 4rpx 12rpx;
					border-radius: 6rpx;
					font-size: 24rpx;
					font-weight: bold;
					margin: 10rpx;
					color: #006633;
					background-color: #EEEEEE;
				}
			}

			.goodInfoVce {
				margin-top: 30rpx;
				font-size: 32rpx;
				color: #333333;
			}
		}
	}

	.carV {
		position: fixed;
		bottom: 0%;
		left: 0;
		z-index: 999997;
		border-radius: 12rpx 12rpx 0 0;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		box-shadow: 0 0 12rpx #aaa;
		width: 90vw;
		padding: 0 5vw;

		.carVl {
			display: flex;
			align-items: center;
			position: relative;

			/deep/.uv-badge {
				position: absolute;
				top: 0%;
				left: 0;
			}

			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 40rpx;
			}

			text {
				color: #FF3B30;
				font-size: 36rpx;
				font-weight: bold;
			}


		}

	}

	.mock {
		position: fixed;
		top: 0;
		width: 100vw;
		left: 0%;
		height: 100vh;
		background-color: #00000088;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999999;
	}

	.posp {
		padding: 30rpx;

		.pospt {
			width: 100%;
			text-align: center;
			font-weight: bolder;
			margin-bottom: 20rpx;
		}

		.pospis {
			height: 36vh;
			max-height: 36vh;
			overflow-y: auto;

			.pospi {
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				border-bottom: 1px dashed #ccc;
				padding: 10rpx 0;
				margin: 10rpx 0;

				&:last-of-type {
					border: 0;
				}

				.pospib {
					width: 30rpx;
					height: 30rpx;
					border: 1px solid #ccc;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					left: 0;
				}

				.pospibA {
					border-color: #2c9b94;
				}

				.pospic {
					margin-left: 80rpx;

					.pospict {
						font-weight: bold;
						margin-bottom: 10rpx;
						font-size: 33rpx;
						width: 500rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.pospice {
						font-size: 28rpx;
						color: #555;
					}
				}
			}
		}

		.pospa {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 660rpx;
			background-color: #2c9b94;
			border-radius: 12rpx;
			color: #fff;
			height: 60rpx;
			margin: 20rpx auto 0;

			/deep/.uv-icon {
				display: inline-block;
				margin-right: 20rpx;
				position: relative;
				top: 5rpx;
			}
		}
	}
</style>